import React from 'react';
import {type RemediationItem, RemediationStatus } from '@/types/Remediation';
import { RiskLevel } from '@/types/work';

interface RemediationItemCardProps {
  item: RemediationItem;
  onEdit: (item: RemediationItem) => void;
  onDelete: (id: string) => void;
  onToggleStatus: (id: string) => void;
}

const RemediationItemCard: React.FC<RemediationItemCardProps> = ({
  item,
  onEdit,
  onDelete,
  onToggleStatus,
}) => {
  // 格式化日期
  const formatDate = (dateString?: string) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    return date.toLocaleDateString('zh-CN');
  };

  // 获取风险等级对应的样式类名
  const getRiskLevelClass = (level: RiskLevel) => {
    switch (level) {
      case RiskLevel.HIGH:
        return 'tag-severity-high';
      case RiskLevel.MEDIUM:
        return 'tag-severity-medium';
      case RiskLevel.LOW:
        return 'tag-severity-low';
      default:
        return 'tag-severity-low';
    }
  };

  // 获取状态对应的样式类名
  const getStatusClass = (status: RemediationStatus) => {
    switch (status) {
      case RemediationStatus.COMPLETED:
        return 'tag-status-resolved';
      case RemediationStatus.IN_PROGRESS:
        return 'tag-status-pending';
      default:
        return 'tag-issue-type';
    }
  };

  // 获取卡片样式
  const getCardClass = () => {
    return item.status === RemediationStatus.COMPLETED
      ? 'border-green-300 bg-green-50 dark:bg-green-900/10'
      : '';
  };

  return (
    <div className={`p-4 border rounded-lg mb-4 transition-colors ${getCardClass()}`}>
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-3 gap-2">
        <h3 className="font-medium text-base">{item.title}</h3>
        <div className="flex flex-wrap items-center gap-2">
          <div className="flex flex-wrap gap-2">
            <span className={getRiskLevelClass(item.riskLevel)}>
              {item.riskLevel === RiskLevel.HIGH ? '高风险' : 
               item.riskLevel === RiskLevel.MEDIUM ? '中风险' : '低风险'}
            </span>
            <span className={getStatusClass(item.status)}>
              {item.status === RemediationStatus.COMPLETED ? '已完成' : '整改中'}
            </span>
          </div>
          <div className="flex space-x-1">
            <button
              onClick={() => onEdit(item)}
              className="p-1 hover:bg-muted rounded-md transition-colors"
              title="编辑"
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
              </svg>
            </button>
            <button
              onClick={() => onDelete(item.id)}
              className="p-1 hover:bg-muted rounded-md transition-colors text-destructive"
              title="删除"
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
            </button>
          </div>
        </div>
      </div>
      
      <div className="mb-4">
        <p className="text-sm mb-2">{item.suggestion}</p>
        <div className="text-xs text-muted-foreground">
          <span>发现时间: {formatDate(item.createdAt)}</span>
          {item.status === RemediationStatus.COMPLETED && item.completionDate && (
            <span className="ml-4">完成时间: {formatDate(item.completionDate)}</span>
          )}
        </div>
      </div>
      
      <div className="flex justify-end">
        <button
          onClick={
            () => onToggleStatus(item.id)
          }
          className={`
            px-3 py-1 rounded-md text-sm transition-colors
            ${item.status === RemediationStatus.COMPLETED
              ? 'bg-muted text-muted-foreground hover:bg-muted/80'
              : 'bg-primary text-primary-foreground hover:bg-primary-hover'
            }
          `}
        >
          {item.status === RemediationStatus.COMPLETED ? '标记为整改中' : '标记为已完成'}
        </button>
      </div>
    </div>
  );
};

export default RemediationItemCard;
